<template functional>
    <Tooltip
        v-if="props.type === 'tooltip'"
        :transfer="true"
        :max-width="props.width"
        :content="props.content"
        :placement="props.placement"
        :class="
            `warning-tip ${data.staticClass || data.class ? data.staticClass || data.class : ''}`
        "
        :style="data.staticStyle || data.style ? data.staticStyle || data.style : {}"
    >
        <Icon type="ios-alert" :class="error ? 'error-icon' : 'alert-icon'"/>
        <div v-if="slots().default" slot="content"><slot></slot>{{error}}</div>
    </Tooltip>
    <p v-else class="warning-tip">
        <Icon type="ios-alert" :class="error ? 'error-icon' : 'alert-icon'"/> {{ props.content }}
    </p>
</template>
<script>
export default {
    name: 'WarningTip',
    functional: true,
    props: {
        error:{
            type: Boolean,
            default: false
        },
        type: {
            type: String,
            default: 'tooltip'
        },
        placement: {
            type: String,
            default: 'top'
        },
        width: {
            type: Number,
            default: 300
        },
        content: {
            type: String,
            default: ''
        }
    }
};
</script>
<style scoped>
.warning-tip {
    --warning-color: #f90;
    color: var(--warning-color);
}
.alert-icon {
    color: var(--warning-color);
    font-size: 15px;
    cursor: pointer;
}
.error-icon {
    color:'rgb(203, 2, 54)';
}
.m-l-3 {
    margin-left: 3px;
}
</style>
